<template>
	<view class="uni-content" :style="{ paddingTop: top + 'px' }">
		<view class="login-logo">
			<image src="/static/jtlogo.png"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">{{ title }}</text>
		<text class="description">{{ description }}</text>
		<u--form
			ref="loginFormRef"
			:model="loginData"
			:rules="loginRules"
			:errorType="errorType"
			labelPosition="left">
			<u-form-item prop="ip">
				<u--input
					:focus="focusip"
					@blur="focusip = false"
					class="input-box"
					clearable
					v-model="loginData.ip"
					placeholder="请输入IP" />
			</u-form-item>
			<u-form-item prop="port">
				<u--input
					:focus="focusport"
					@blur="focusport = false"
					class="input-box"
					clearable
					v-model="loginData.port"
					placeholder="请输入端口号" />
			</u-form-item>
		</u--form>

		<button
			class="uni-btn"
			type="primary"
			@click="pwdLogin"
			:loading="loading">
			保 存
		</button>
		<!-- 忘记密码 -->
		<!-- <view class="link-box">
			<view>
				<text class="link" @click="toRetrievePwd">忘记密码</text>
			</view>
		</view> -->
		<!-- 其他操作 -->
		<view class="tool">
			<view @click="jumpTo('/pages/login/accountLogin')">
				<view class="iconView">
					<u-icon name="account" color="#2979ff" size="35px"></u-icon>
				</view>
				<text>账号</text>
			</view>
			<view @click="jumpTo('/pages/login/scancodeLogin')">
				<view class="iconView">
					<u-icon name="scan" color="#2979ff" size="35px"></u-icon>
				</view>
				<text>扫码</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
// 导入仓库
import { useUserStore } from "@/stores/useUserStore";
import { reactive, ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";

const ipInfo = computed(() => JSON.parse(useUserStore().ipInfo));

const top = uni.getSystemInfoSync().safeAreaInsets.top;

const title = process.env.VITE_APP_TITLE;
const description = process.env.VITE_APP_DES;

onShow(() => {
	const { ip, port } = ipInfo.value;
	loginData.ip = ip;
	loginData.port = port;
});

// 定义基本表单信息
const loginFormRef = ref();
const loginData = reactive({
	ip: "",
	port: "",
});

const loginRules = ref({
	ip: {
		type: "string",
		required: true,
		message: "请输入ip",
		trigger: ["blur", "change"],
	},
	port: [
		{
			type: "string",
			required: true,
			message: "请输入端口号",
			trigger: ["blur", "change"],
		},
	],
});

// 定义其他表单信息
const focusip = ref(false);
const focusport = ref(false);
const errorType = ref("toast");

/**
 * 忘记密码
 */
function toRetrievePwd() {
	uni.showToast({
		title: "请联系管理员",
	});
}

/**
 * 登录
 */
const loading = ref(false);
function pwdLogin() {
	loading.value = true;
	loginFormRef.value
		.validate()
		.then(async (res) => {
			useUserStore().setIpInfo(loginData);
			loading.value = false;
			uni.showToast({
				title: "保存成功",
			});
		})
		.catch((errors) => {
			console.log("errors", errors);
			loading.value = false;
		});
}
/**
 * 跳转
 */
function jumpTo(url) {
	uni.redirectTo({
		url: url,
	});
}
</script>

<style lang="scss" scoped>
@import "@/static/css/login-page.scss";

@media screen and (min-width: 690px) {
	.uni-content {
		height: auto;
	}
}

.forget {
	font-size: 12px;
	color: #8a8f8b;
}

.link-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}

.link {
	font-size: 13px;
}
.tool {
	display: flex;
	width: 100%;
	background: #ffffff;
	justify-content: space-evenly;
	margin-top: 30px;

	> view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 20px;

		& text {
			font-size: 15px;
			font-weight: 400;
			color: #999;
			line-height: 32rpx;
		}

		& .iconView {
			width: 60px;
			height: 60px;
			background: #ecf5ff;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
		}
	}
}
</style>
